<template>
<!-- 大型音乐播放页面 -->
  <div class="Playpage" v-if="isFullScreen">
    <div class="mask"
    :style="{backgroundImage : 
    'url(' +  (currentPlaySong.picUrl ||  currentPlaySong.al.picUrl)+')'}"
    >
    <!-- 上面加了括号才能进行选择 -->
    </div>
    <div class="top">
      <div class="close" @click="$emit('update:isFullScreen',false)"></div>
      <div class="songList">
        <div class="songName">{{currentPlaySong.name}}</div>
        <span  v-for="(artist, index) in currentPlaySong.song
              ? currentPlaySong.song.artists
              : currentPlaySong.ar"
              :key="index"
        >{{artist.name}}</span>
      </div>
      <div class="share"></div>
    </div>
    <div style="height: calc(100vh - 190px);">
    <KeepAlive>
      <PlayAlbum 
        class="album"
        v-if="!showLyric" 
        :currentPlaySong="currentPlaySong"
        :showLyric.sync="showLyric"
        :playing="playing"
      />
      <PlayLyric 
        class="lyric"
        v-else
        :currentPlaySong="currentPlaySong"
        :showLyric.sync="showLyric"
        :playing="playing"
        :currentTime="currentTime"
      />
    </KeepAlive>
    </div>
    <div class="bottom">
      <!-- 进度条 -->
      <input type="range" class="range" min="0" :max="allTime" v-model="barValue"  @change="changeHandler" @input="inputHandler">
      <div class="timeBar">
        <span>{{nowTime}}</span>
        <div class="bar">
            <span :style="{ width: (value / allTime) * 100 + '%' }"></span>
        </div>
        <span>{{longTime}}</span>
      </div>
      <!-- 歌曲切换暂停 -->
      <ul>
        <li :class="className" @click="toogleMode"></li>
        <li @click="$emit('playLastSong')"></li>
        <li 
          @click="clickStop" 
          v-if="playing"
          class="stop"
        >
        </li>
        <li 
          @click="clickPlay" 
          v-else
          class="play"
        >
        </li>
        <li @click="$parent.playNextSong"></li>
        <li @click="$emit('showlist',true)"></li>
      </ul>
    </div>
  </div>
</template>
  
<script>

import PlayAlbum from '@/components/PlayAlbum.vue'
import PlayLyric from '@/components/PlayLyric.vue'

export default {
  name: 'Playpage',
  props: ['currentPlaySong',"isFullScreen","playing","allTime","currentTime","playMode"],
  components: {
    PlayAlbum,
    PlayLyric,
  },
  data: function(){
    return{
      showLyric: false,
      barValue: 0,
      inputing: false,
      mode: ['sx','sj','xh'],
      nextMode: 'sx',
    }
  },
 
  methods:{
    
    clickStop: function(){
      this.$parent.$refs.audio.pause();
      this.$emit("update:playing",false);
    },
    clickPlay: function(){
      this.$parent.$refs.audio.play();
      this.$emit("update:playing",true);
    },
    // 播放时间转换格式函数
    timeMath: function(time){
      var min = (time/60).toFixed(2);
      if (min >= 10) return min.replaceAll('.',':');
      else return ('0'+ min).replaceAll('.',':');
    },
    //松手时改变歌曲时间
    changeHandler: function(){
      this.inputing = false;
      this.$emit("update:currentTime", this.barValue);
    },
    //移动时播放条跟着移动
    inputHandler: function(){
      this.inputing = true;
    },
    //切换播放模式
    toogleMode: function(){
      var nowMode = this.mode.findIndex( item => item == this.nextMode);
      var nextMode = nowMode === this.mode.length - 1 ? 0 : nowMode + 1;
      this.nextMode = this.mode[nextMode];
      this.$emit('update:playMode',this.nextMode)
    }
  },
  computed: {
    longTime: function(){
      return this.timeMath(this.allTime);
    },
    nowTime: function(){
      return this.timeMath(this.currentTime);
    },
    value: function(){
      if(this.inputing) return this.barValue
      return this.currentTime;
    },
    //切换播放图标顺序class
    className: function(){
      return{
        shunxu : this.nextMode == 'sx',
        shunxu1 : this.nextMode == 'sj',
        shunxu2 : this.nextMode == 'xh',
      }
    }
  }
}
</script>

<style lang='less' scoped>
    .Playpage{
      height: 100vh;
      width: 100vw;
      position: relative;
      padding: 10px;
      color: white;
      .mask{
        position: absolute;
        z-index: -1;
        height: 100%;
        width: 100%;
        background: black center no-repeat;
        background-size: cover;
        filter: blur(20px) brightness(0.8);
        transform: scale(1.2);
      }
      .top{
         height: 50px;
         width: 100%;
         display: flex;
         justify-content: space-between;
         align-items: center;
        //  background-color: yellow;
        .close{
            height: 50px;
            width: 50px;
            background-color: skyblue;
            background: url('../assets/images/c9b.png') center no-repeat;
            background-size: 50% auto;
        }
        .songList{
          text-align: center;
          .songName{
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
          span{
            color: #c7c5c4;
            font-size: 14px;
          }
          span::after{
            content: " / ";
          }
          span:last-of-type::after{
            content: " > ";
          }
        }
        .share{
           height: 50px;
           width: 50px;
           background-color: pink;
           background: url('../assets/images/c97.png') center no-repeat;
          background-size: 50% auto;
        }
      }
      .bottom{
        padding: 10px;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        // background-color: yellow;
        .range{
          width: 100%;
          position: absolute;
          bottom: 110px;
          left: 12vw;
          width: 75vw;
          z-index: 1;
          opacity: 0;
        }
        .timeBar{
          display: flex;
          align-items: center;
          span{
            font-size: 12px;
          }
          .bar{
            margin: 0 10px;
            flex: 1;
            height: 3px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 25px;
            span{
              display: block;
              height: 100%;
              width: 0%;
              background: rgba(238, 235, 235, 0.4);
              align-items: center;
              position: relative;
              &::after {
                content: "";
                display: block;
                width: 8px;
                height: 8px;
                background: white;
                transform: translate(2px, -2px);
                position: absolute;
                right: 0px;
                top: 0px;
                border-radius: 50%;
              }
            }
            
          }
        }
        ul{
          width: 100%;
          height: 100px;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          .shunxu{
              background: url('../assets/images/chw.png');
            }
          .shunxu1{
              background: url('../assets/images/sj.png');
            }
          .shunxu2{
              background: url('../assets/images/xh.png');
            }
          li{
            height: 30px;
            width: 30px;
            background-color: pink;
            &:nth-child(3){
              height: 50px;
              width: 50px;
            }
            &.stop{
              background-color: red;
              background: url('../assets/images/暂停.png');
              background-size: contain;
            }
            &.play{
              background-color: rgb(255, 208, 0); 
              background: url('../assets/images/播放.png');
              background-size: contain;
            }
             &:nth-child(1){
              background-size: cover;
              transform: scale(1.5);
            }
            &:nth-child(2){
              background: url('../assets/images/上一首.png');
              background-size: contain;
            }
            &:nth-child(4){
              background: url('../assets/images/下一首.png');
              background-size: contain;
            }
            &:nth-child(5){
              background: url('../assets/images/axv.png');
              background-size: contain;
              transform: scale(1.4);
            }
          }
        }
      }
    }
</style>
